<template>
  <div class="table-box">
    <Table
        ref="table"
        :searchColumns="searchColumns"
        @getTableList="getTableList"
    >
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="createMenu">新增菜单</el-button>
        <!--        <el-button  type="primary" :icon="Upload" plain @click="">批量添加菜单</el-button>-->
        <!--        <el-button  type="primary" :icon="Download" plain @click="">导出菜单数据</el-button>-->
        <!--        <el-button type="primary" plain @click="">To 子集详情页面</el-button>-->
        <!--        <el-button type="danger" :icon="Delete" plain  @click="">-->
        <!--          批量删除菜单-->
        <!--        </el-button>-->
      </template>
      <template #table>
        <!-- 表格主体 -->
        <el-table :data="menuList"
                  row-key="id"
                  border
                  style="width: 100%">
          <el-table-column prop="meta.name" fixed="left" align="left" label="权限名称" width="200"/>
          <el-table-column prop="meta.icon" align="center" label="图标"/>
          <el-table-column prop="path" label="访问地址" width="150"/>
          <el-table-column prop="name" label="组件名称" width="150"/>
          <el-table-column prop="component" label="组件路径" width="150"/>
          <el-table-column prop="meta.activeMenu" align="center" label="详情页菜单高亮" width="150"/>
          <el-table-column prop="meta.isLink" align="center" label="外链地址" width="150"/>
          <el-table-column prop="meta.isHide" align="center" label="是否隐藏" width="150"/>
          <el-table-column prop="meta.isFull" align="center" label="是否全屏" width="150"/>
          <el-table-column prop="meta.isAffix" align="center" label="是否固定标签页" width="150"/>
          <el-table-column prop="meta.isKeepAlive" align="center" label="路由是否缓存" width="150"/>
          <el-table-column prop="redirect" label="路有重定向地址" width="150"/>
          <el-table-column prop="update_time" align="center" label="最近修改时间" width="170"/>
          <el-table-column align="center" fixed="right" label="操作" min-width="150px">
            <template #default="scope">
              <el-button
                  @click=""
                  size="small">编辑
              </el-button>
              <el-button
                  size="small"
                  @click=""
                  type="danger">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Table>
    <el-drawer ref="fromDrawer" v-model="fromDrawerVisible" title="布局设置" size="290px">
      2323
    </el-drawer>


    <!--  新建/编辑框-->
<!--        <el-form>-->
<!--          <el-row>-->
<!--            <el-col :span="24">-->
<!--              <el-form-item label="权限图标:">-->
<!--                <el-select defaultFirstOption-->
<!--                           placeholder="权限图标" clearable-->
<!--                           style="width: 100%;" filterable-->
<!--                           v-model="MenuFormData.icon.name">-->
<!--                  <template #prefix>-->
<!--                    <unicon :name="MenuFormData.icon.name" :fill="MenuFormData.icon.fill"-->
<!--                            :icon-style="MenuFormData.icon.iconStyle"/>-->
<!--                  </template>-->

<!--                  <template #default>-->
<!--                    <el-option v-for="item in IconsNameS" :value="item">-->
<!--                      <span class="iconItem" style="float: left">-->
<!--                        <unicon :name="item" :fill="MenuFormData.icon.fill" :icon-style="MenuFormData.icon.iconStyle"/>-->
<!--                      </span>-->
<!--                      <span style="float: right">{{ item }}</span>-->
<!--                    </el-option>-->
<!--                  </template>-->

<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->

<!--        </el-form>-->

    <el-dialog v-model="MenuDialog" title="新建菜单" width="30%" draggable>
      <el-form :model="MenuFormData" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="图标样式:">
              <el-select style="width: 100%;"
                         v-model="MenuFormData.icon.iconStyle" placeholder="图标样式">
                <el-option label="line " value="line"/>
                <el-option label="monochrome" value="monochrome"/>
                <el-option label="solid" value="solid"/>
                <el-option label="thinline" value="thinline"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标颜色:">
              <el-color-picker v-model="MenuFormData.icon.fill"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="权限图标:">
              <el-select defaultFirstOption
                         placeholder="权限图标" clearable
                         style="width: 100%;" filterable
                         v-model="MenuFormData.icon.name">
                <template #prefix>
                  <unicon :name="MenuFormData.icon.name" :fill="MenuFormData.icon.fill"
                          :icon-style="MenuFormData.icon.iconStyle"/>
                </template>

                <template #default>
                  <el-option v-for="item in IconsNameS" :value="item">
                      <span class="iconItem" style="float: left">
                        <unicon :name="item" :fill="MenuFormData.icon.fill" :icon-style="MenuFormData.icon.iconStyle"/>
                      </span>
                    <span style="float: right">{{ item }}</span>
                  </el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="MenuDialog = false">取消</el-button>
        <el-button type="primary" @click="MenuDialog = false">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>


</div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import {Delete, EditPen, CirclePlus, Upload, Download} from "@element-plus/icons-vue";
import Table from '@/components/Table/index.vue'
import Form from "./Form.vue";
import {useMenuStore} from "@/stores/modules/system/menu.js";
import IconsNameS from '@/utils/UnIcons.js'
import {getMenuListApi} from "@/api/modules/system/menu";

const menuStore = useMenuStore()


// 搜索项配置
const searchColumns = [
  {label: "菜单名称", field: "name", searchType: "input"},
];

// 表格数据
let tableList = ref([])
const table = ref(null)
const getTableList = async (searchArgs) => {
  const {data} = await getMenuListApi(searchArgs)
  tableList.value = data.data
  table.value.pageable.pageNum = data.page
  table.value.pageable.pageSize = data.pagesize
  table.value.pageable.total = data.total
}

onMounted(() => {
  getTableList()
})

// 新建/编辑的表单页
const fromDrawerVisible = ref(false)
const createMenu = () => {
  MenuDialog.value = true
}

const fromDrawer = ref()

console.log(fromDrawer.value)

const MenuFormData = reactive({
  icon: {name: 'home', fill: '#00C8FF', iconStyle: 'line'}
})

const MenuDialog = ref(false)

const MenuDialogClose = () => {
  MenuDialog.value = false
}


</script>

<style scoped lang="scss">
@import "./index.scss";

</style>
